<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>预定</title>
<link href="bootstrapusers/css/bootstrap.css" rel="stylesheet"
	type="text/css" media="all">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="bootstrapusers/js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<link href="bootstrapusers/css/style.css" rel="stylesheet"
	type="text/css" media="all" />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />

<!--Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Hind:400,300'
	rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Aladin'
	rel='stylesheet' type='text/css'>

<!-- animated-css -->
<link href="bootstrapusers/css/animate.css" rel="stylesheet"
	type="text/css" media="all">
<link href="bootstrapusers/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrapusers/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css" />
<!-- Custom styles for this template -->
<link href="bootstrapusers/css/style2.css" rel="stylesheet">
<link href="bootstrapusers/fonts/antonio-exotic/stylesheet.css"
	rel="stylesheet">
<link rel="stylesheet" href="bootstrapusers/css/lightbox.min.css">
<link href="bootstrapusers/css/responsive.css" rel="stylesheet">
<link href="layuiadmin/layui/css/layui.css" rel="stylesheet">
<link href="layuiadmin/layer/layer.css" rel="stylesheet">
<script src="bootstrapusers/js/jquery.min.js" type="text/javascript"></script>

<script src="bootstrapusers/js/lightbox-plus-jquery.min.js"
	type="text/javascript"></script>
<script src="bootstrapusers/js/instafeed.min.js" type="text/javascript"></script>
<script src="bootstrapusers/js/custom.js" type="text/javascript"></script>
<script src="bootstrapusers/js/wow.min.js"></script>
<script src="layuiadmin/laydate/laydate.js"></script>
<script src="layuiadmin/layui/layui.js"></script>
<script src="layuiadmin/layer/layer.js"></script>

<!-- animated-css -->
<script src="bootstrapusers/js/bootstrap.min.js"></script>


</head>
<body>

	<!--header-top start here-->
	<%@ include file="header.jsp"%>
	<!--header end here-->
	<!--short codes start here-->
	
	<div class="typrography">
		<div class="container">
			<div class="page">
				<h3 class="typo1 wow fadeInDownBig" data-wow-delay="0.3s">预订套房</h3>
				<!--button-->
				<section class="site-section" style="margin-top: 100px;">

				<div class="container">

					<div class="row">

						<div class="col-md-6">

							<form id="form1" method="post">                          
                                <input type="text" id="userid" name="userid" style="display:none" value="${user.userid}">
                                <input type="text" id="roomid" name="roomid" style="display:none">
								<div class="row">
                                    <!-- 入住时间 -->
									<div class="col-sm-6 form-group">

										<label for="">入住日期</label>

										<div style="position: relative;">					
	
											<span class="fa fa-calendar icon"
												style="position: absolute; right: 10px; top: 10px;">	
												</span>

											<input type="text" class="form-control" id="starttime" name="starttime">
										</div>

									</div>
                                    <!-- 退房时间 -->
									<div class="col-sm-6 form-group">

										<label for="">退房日期</label>

										<div style="position: relative;">

										<span class="fa fa-calendar icon"
												style="position: absolute; right: 10px; top: 10px;">	
												</span>

											<input type="text" class="form-control" id="endtime" name="endtime">	

										</div>
										

									</div>

								</div>

								<div class="row">

									<div class="col-md-6 form-group">

										<label for="room">房型</label> 
										<select name="roomtype" id="roomtype" class="form-control">	

                                            <option value="-1">请选择房间</option>
                                            
											<option value="1">单人间</option>

											<option value="2">双人间</option>

											<option value="3">三人间</option>
											
											<option value="0">总统套房</option>


										</select>

									</div>

									<div class="col-md-3 form-group">

										<label for="room">房号</label> <input type="text"  name="roomno" id="roomno" readonly="readonly" placeholder="101-307房" class="form-control ">

									</div>
									<div class="col-md-3 form-group">

									
										<label for="room">房价</label> <input type="text"  name="roomsalary" id="roomsalary" readonly="readonly" placeholder="199-599¥" class="form-control ">

									</div>

								</div>

								<div class="row">

									<div class="col-md-12 form-group">

										<label for="room">联系电话</label> <input type="text"  name="ordertel" id="ordertel" placeholder="88888888"
											class="form-control ">

									</div>

								</div>

								<div class="row">

									<div class="col-md-12 form-group">

										<label for="message">留言</label>

										<textarea name="ordermessage" id="ordermessage" class="form-control " placeholder="请输入您需要的留言"
											cols="30" rows="8"></textarea>

									</div>

								</div>

								<div class="row">

									<div class="col-md-6 form-group">

										<input type="button" value="现在预定" class="btn" id="sub" style="background-color:#393D49;color:white">

									</div>

								</div>

							</form>

						</div>

						<div class="col-md-1"></div>

						<div class="col-md-5">

							<h3 class="mb-5" id="roomTitle">实物图</h3>
							

							<div class="media d-block room mb-0">

								<figure>
								 <img id="roomPhoto" src="bootstrapusers/images/room1.jpg"
									alt="Generic placeholder image" class="img-fluid">

								<div class="overlap-text"></div>

								</figure>



							</div>

						</div>

					</div>

				</div>

				</section>
			</div>
		</div>
	</div>
	<!--footer start here-->
	<%@ include file="footer.jsp"%>



	<script>
		layui.use('laydate', function() {
			var laydate = layui.laydate;

			//入住时间
			var endDate=laydate.render({
				elem : '#starttime', //指定元素
				type: 'date',
				theme: '#393D49',
				value: new Date(),
				min:0,
				max:7
		
				
			});
			
			
			//退房时间
			 laydate.render({
				elem : '#endtime', //指定元素
				type: 'date',
				theme: '#393D49',
				value: new Date(),
				min:0,
				//max:7
               
			}); 
			 
			
		});
		
		layui.use('layer', function() {
			var layer = layui.layer;
			
		//jquery代码部分
	//	$(document).ready(function(){
			
			//ajax预约提交【普通的ajax方法】
			$("#sub").click(function(){
				var starttime=Date.parse($("#starttime").val());
				var endtime=Date.parse($("#endtime").val());
				if(endtime-starttime<=0){
					layer.alert("入住天数至少要一天");
				   }else if($("#roomtype").val()==-1){
					layer.alert("请选择房型");
					}else{
				 $.ajax({
					type : "post",
					url : "addUserOrder",
					data : {//这里以后看下可以封装成一个对象传过去
						"userid":$("#userid").val(),
						"roomid":$("#roomid").val(),
						"orderstartdate":$("#starttime").val(),			
						"orderenedate":$("#endtime").val(),
						"ordertel":$("#ordertel").val(),
						"ordermessage":$("#ordermessage").val()
						
					},
					
					success : function(cm) {						
						
						 /* layer.msg(cm.msg, {
							time : 5000,
						},function() {
							if (cm.msg == "预订成功") {

								
								location.href="personalpage";
								

							}
							
							if(cm.msg == "请先登录"){
								
								//window.alert("请先登录");
								
								location.href="login1";
							} 
						});  */
						
						//console.log("有没有走啊");
						  if (cm.msg == "预订成功") {
							  layer.msg(cm.msg, {
									time : 1000
								}, function() {
									location.href="personalpage";
								});
						  }
							/* layer.msg(cm.msg);
							location.href="personalpage"; */
							//window.alert("预订成功");
						
						if(cm.msg == "请先登录"){
							
							layer.msg(cm.msg, {
								time : 1000
							}, function() {
								location.href="login1";
							});
							/* layer.msg(cm.msg);
							//window.alert("请先登录");
							
							location.href="login1"; */
						}    
						
					}
	
				}); 
						
					}
			});

		
			//房间类型图片的切换
			$("#roomtype").change(function(){
							
				var p =$(this).val();
				$("#roomPhoto").attr("src","bootstrapusers/images/room"+p+".jpg");
				
		
			});
			
		
			//房间筛选：只能选择可以入住的房间【普通的ajax方法】
			$("#roomtype").change(function(){
				//var p =$(this).val();
				//console.log(p);
				$.ajax({
					type : "get",
					url : "selectRoom",
					data : {
						
						"orderstartdate":$("#starttime").val(),			
						"orderenedate":$("#endtime").val(),
						"roomtype":$(this).val()
						
					},
					
					success : function(map) {
						var arr=map.rooms;//得到返回的所有房间数组
						var index = Math.floor((Math.random()*arr.length));//随机分配一个房间
						//console.log("随机分配一个房间： "+arr[index].roomno);//输出来看下
						 /*  for(var i=0;i<map.rooms.length;i++){//循环得到所有的房间号
							  
							  console.log("rooms: "+arr[i].roomno); 
						  } */
				        if(arr[index]!=null){
				        	$("#roomno").attr("value",arr[index].roomno+"房");//设置房间号的值
				        	$("#roomno").css("color","#4E5465");
							$("#roomsalary").attr("value",arr[index].roomsalary+"¥");//设置房间的价钱
							$("#roomid").attr("value",arr[index].roomid)//设置房间的id
				        }else{
				        	$("#roomno").attr("value","已满");//设置房间号的值
				        	$("#roomno").css("color","red");
							$("#roomsalary").attr("value","- - ¥");//设置房间的价钱
							
				        }
						
					}
	
				}); 
				
				
			
			
			});
		
		
			
			
		});
			
				
	</script>
</body>
</html>